<template>
  <div>
    <div class="item-line">
      <div>输入变量</div>
      <div
        v-if="data.inputList && data.inputList.length > 0"
        class="param-item"
      >
        <div class="param-name">变量名称</div>
        <div class="param-source">变量来源</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.inputList"
        :key="index"
        class="param-item">
        <div class="param-name">
          <ac-input v-model="param.name" />
        </div>
        <div class="param-source">
          <ac-select
            v-model="param.sourceParamId"
            :options="sourceParamOptions"
          />
        </div>
        <div class="param-operate">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam(index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加变量
      </div>
    </div>
    <div class="item-line">
      <div>条件</div>
    </div>
    <div
      class="item-line"
      v-for="(group, index) in data.conditionList"
      :key="index"
    >
      <div class="inline">
        <div style="flex-shrink: 0;width: 100px;">条件分支 {{index + 1}}</div>
        <div style="flex-grow: 1">
          <ac-input v-model="group.name" />
        </div>
        <div style="width: 30px;justify-content: center;">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            style="cursor: pointer"
            @click.stop="deleteGroup(index)"
          />
        </div>
      </div>
      <div class="param-item">
        <div class="param-group">分组</div>
        <div class="param-param">参数来源</div>
        <div class="param-type">条件类型</div>
        <div class="param-value">条件值</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        class="param-item"
        v-for="(condition, index) in group.groupList"
        :key="index"
      >
        <div class="param-group">
          <el-tooltip content="同一分组为“and”，不同分组为“or”" placement="left" popper-class="padding-10-15">
            <ac-number v-model="condition.group" />
          </el-tooltip>
        </div>
        <div class="param-param">
          <ac-select v-model="condition.name" :options="getOptions()" />
        </div>
        <div class="param-type">
          <ac-select v-model="condition.type" options="大于,大于等于,等于,小于,小于等于,不等于,包含,不包含" />
        </div>
        <div class="param-value">
          <ac-input v-model="condition.value" />
        </div>
        <div class="param-operate">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteItem(group, index)"
          />
        </div>
      </div>
      <div class="button-box">
        <div class="button" @click="addItem(group)">
          <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加条件
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addGroup">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加条件分支
      </div>
    </div>
    <div style="margin-top: 10px">
      <div>
        <div>ELSE</div>
        <div style="color: #bbb">当以上条件都不满足时，执行此分支，分支索引为：-1</div>
      </div>
    </div>
    <div class="item-line">
      <div>输出变量</div>
      <div
        v-for="(item, index) in data.outputList"
        :key="index"
        style="color: #666"
      >
        <div>{{'<' + item.type + '>'}} {{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import tool from "@/utils/tool";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        inputList: [],
        conditionList: []
      }
    }
  },
  sourceParamOptions: {
    type: Object,
    default: () => {}
  }
});

const data = ref(props.data);

const addParam = () => {
  if (!data.value.inputList) {
    data.value.inputList = [];
  }
  data.value.inputList.push({id: tool.uuid()});
};

const deleteParam = (index) => {
  data.value.inputList.splice(index, 1);
};

const addGroup = () => {
  if (!data.value.conditionList) {
    data.value.conditionList = [];
  }
  data.value.conditionList.push({id: tool.uuid(), name: '', groupList: [{id: tool.uuid(), value: ''}]});
};

const deleteGroup = (index) => {
  data.value.conditionList.splice(index, 1);
};

const addItem = (group) => {
  if (!group.groupList) {
    group.groupList = [];
  }
  group.groupList.push({id: tool.uuid(), value: ''});
};

const deleteItem = (group, index) => {
  group.groupList.splice(index, 1);
};

const getOptions = () => {
  return (data.value.inputList || [])
    .filter(item => item.name)
    .map(item => ({key: item.name, value: item.name}));
};
</script>

<style scoped>
.item-line {
  margin-top: 15px;
  >div:first-child {
    margin-bottom: 5px;
  }
}
.param-item {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  .param-name {
    width: 200px;
    flex-shrink: 0;
  }
  .param-group {
    width: 80px;
    flex-shrink: 0;
  }
  .param-type, .param-param {
    width: 100px;
    flex-shrink: 0;
  }
  .param-value {
    flex-grow: 1;
  }
  .param-source {
    flex-grow: 1;
  }
  .param-operate {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .ac-icon {
      cursor: pointer;
    }
  }
}
.button-box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .button {
    color: #67C23A;
    cursor: pointer;
    display: flex;
    align-items: center;
    .ac-icon {
      margin-right: 8px;
    }
  }
}
.inline {
  display: flex;
  >div {
    display: flex;
    align-items: center;
  }
}
.condition-item {
  margin-top: 10px;
  position: relative;
  .condition-header {
    box-sizing: border-box;
    padding: 5px;
    position: absolute;
    width: 100%;
    display: flex;
    color: #bbbbbb;
    div:first-child {
      flex-grow: 1;
    }
    .ac-icon {
      z-index: 99;
      cursor: pointer;
    }
  }
  :deep(textarea) {
    padding-top: 28px;
    background-color: transparent;
  }
}
</style>